<template>
  <a-card>
    <s-table
      ref='table'
      size='default'
      rowKey='name'
      :columns='columns'
      :showPagination=false
      :data='loadData'
    >
      <span slot='serial' slot-scope='text, record, index'>
        {{ index + 1 }}
      </span>
      <span slot='action' slot-scope='text, record'>
        <template>
          <a-space>
            <a v-if='$auth("/authority/route/update")' @click='edit(record)'>编辑</a>
          </a-space>
        </template>
      </span>
    </s-table>

    <Form ref='formModal' :visible='formVisible' :loading='formLoading' :default-values='formModel' @ok='handleOk' @cancel='handleCancel'></Form>
  </a-card>
</template>

<script>

import { STable } from '@/components'
import Form from './form'

export default {
  name: 'permission',
  components: { STable, Form },
  data() {
    return {
      formVisible: false,
      formLoading: false,
      formModel: undefined,

      // 表头
      columns: [
        {
          title: '备注',
          dataIndex: 'description',
          needTotal: true
        },
        {
          title: '路由',
          dataIndex: 'name'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$api.route('/app-routes').then(res => {
          return res
        })
      }
    }
  },
  activated() {
    this.$refs.table.refresh()
  },
  methods: {

    edit(record) {
      this.formModel = record
      this.formVisible = true
    },

    handleOk(values) {
      this.formLoading = true

      this.$api.route('', values, 'PUT').then(res => {
        this.formVisible = false
        this.formLoading = false

        // 刷新表格
        this.$refs.table.refresh()

        this.$message.info('保存成功')
      }).catch(res => {
        this.formLoading = false
      })
    },
    handleCancel() {
      this.formVisible = false;
    }
  }
}
</script>

<style scoped>

</style>